<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PolygonLayer, PointLayer, LineLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addScatter3",
    components: {L7MapWithGaode},
    setup() {

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(6, [112, 30.267069])

            fetch(`${window.location.origin}/antv-test/data/450b2d95-006c-4bad-8269-15729269e142.json`)
                .then(res => res.json())
                .then(data => {
                    const layer = new PointLayer()
                        .source(data, {
                            parser: {
                                type: 'json',
                                x: 'lng',
                                y: 'lat'
                            }
                        })
                        .shape('circle')
                        .color('color')
                        .size('value', v => 5 + 15 * v)
                        .style({
                            stroke: 'strokeColor',
                            strokeWidth: 'strokeWidth',
                            strokeOpacity: [
                                'strokeOpacity',
                                (d: number) => {
                                    return d * 2;
                                }
                            ],
                            opacity: 'opacity'
                        })
                        .active(true);
                    scene.addLayer(layer);
                })
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
